<template>
	<view class="project">
		<view class="swiperWrap">
			<swiper :autoplay="autoplay" :interval="interval" :duration="duration" circular  previous-margin='12px' next-margin='12px' v-if="news.length > 0">
				<swiper-item class='swiper_item' v-for="(item,index) in news" :key="index" @click=newsDetail(item)>
							<image v-if="item.bigCoverImage" class="bigCoverImage" :src="item.bigCoverImage" mode="aspectFill"></image>
							
							<view class="titleWrap">
								<view class="title"><text>{{item.title}}</text></view>
								<image src="../../static/image/headerBg.png" mode="widthFix"></image>
							</view>
							
				</swiper-item>
				
			</swiper>
			<view class="noNews" v-if="news.length === 0">
				 <view class="iconWrap">
						<i class='iconfont'>&#xe6ef;</i>
					</view>
				<view class="titleWrap">
					<image src="../../static/image/headerBg.png" mode="top left"></image>
				</view>
			</view>
			
		</view>
		<view class="notice">
			<view class="grace-swiper-msg">
						<view class="grace-swiper-msg-icon">
							<image src="../../static/image/noticeLogo.png" mode=""></image>
						</view>
						<text class="notice_no" v-if="notices.length===0">暂无公告</text>
						<swiper vertical="true" autoplay="true" circular="true" interval="3000">
							<swiper-item v-for="(item,index) in notices" :key="index">
								<navigator :url="'noticeDetail?id='+item.newsId" hover-class="navigator-hover" >{{item.title}}</navigator>
							</swiper-item>
						</swiper>
					</view>
			<text class="more" @click="noticeList">更多</text>
		</view>
		<view class="list">
			<view class="listWrap" v-if="list.length>0">
				<view class="cardWrap" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
							<view class="cardWrap-header">
								<view class="movieInfo_imgDiv">
									<image v-if='item.coverImage' :src="item.coverImage" mode="aspectFill"></image>
									<i v-if='!item.coverImage' class='iconfont '>&#xe6ef;</i>
								</view>
								<view class="movieInfo_content">
									<view class="movieInfo_content_title">
										{{item.title}}
									</view>
									<view class="movieInfo_content_introduce">
										"{{item.subtitle}}"
									</view>
									<view class="movieInfo_content_sort">
										<view class="tag movieInfo_content_type">
											{{item.movieType.text}}
										</view>
										<!-- <view class="tag movieInfo_content_status">
											{{item.movieStatus.text}}
										</view> -->
										<view class="tag movieInfo_content_status">
											{{item.releaseStatus.text}}
										</view>
									</view>
									<view class="movieInfo_content_money" v-if="item.movieStatus.value !=='preheating'">
											<view>￥<text class="price">{{item.priceOfUnit / 100}}</text>/份</view>
										 <view class="tip" v-if="item.userLimit>0">每人限购{{item.userLimit}}份</view>
									</view>
								</view>
							</view>
							<view class="footer" v-if="item.movieStatus.value==='ing'">
										<view class="cardWrap-content">
											<view class="data">
												<view class="bought">
													<text>已购金额(元)</text>
													<text class="saleMoney">{{item.saleMoney_format}}</text>
												</view>
												<view class="right">
													<view class="reach dataItem">
														<text>达成率</text>
														<text>{{item.scale}}</text>
													</view>
													<view class="reach dataItem">
														<text>剩余份数</text>
														<text>{{(item.totalMoney -item.saleMoney )/ item.priceOfUnit}}份</text>
													</view>
													
												</view>
												
											</view>
											<view class="progress-box">
															<progress :percent="item.percent" color="#FF1268" stroke-width="8" />
											</view>
									</view>
									<view class="cardWrap-footer">
										<!-- 目标筹集金额{{item.totalMoney /1000000}}万 -->
									</view>
							</view>
							<view class="condition" v-if="item.movieStatus.value==='pause'">
									<view class="left_icon">
												<view class="line"></view>
												<i class='iconfont'>&#xe62d;</i>
									</view>
									<view class="textWrap">
											<text>暂停销售 </text><text>等待权益发放</text> 
									</view>
									
									<view class="right_icon ">
												<i class='iconfont'>&#xe62d;</i>
												<view class="line"></view>
									</view>
							</view>
							<view class="condition" v-if="item.movieStatus.value==='bonus'">
									<view class="left_icon">
												<view class="line"></view>
												<i class='iconfont'>&#xe62d;</i>
									</view>
									<view class="textWrap">
											<text>筹款成功 </text><text>等待权益发放</text> 
									</view>
									
									<view class="right_icon">
												<i class='iconfont'>&#xe62d;</i>
												<view class="line"></view>
									</view>
							</view>
							<view class="condition gray" v-if="item.movieStatus.value==='finish'">
									<view class="left_icon">
												<view class="line"></view>
												<i class='iconfont'>&#xe62d;</i>
									</view>
									<view class="textWrap">
											<text>项目结束 </text><text>权益已发放</text> 
									</view>
									
									<view class="right_icon ">
												<i class='iconfont'>&#xe62d;</i>
												<view class="line"></view>
									</view>
							</view>
							<view class="condition orange" v-if="item.movieStatus.value==='preheating'">  
									<view class="left_icon">
												<view class="line"></view>
												<i class='iconfont'>&#xe62d;</i>
									</view>
									<view class="textWrap">
											<text>项目预热中 </text><text>请等待开放</text> 
									</view>
									<view class="right_icon">
												<i class='iconfont'>&#xe62d;</i>
												<view class="line"></view>
									</view>
							</view>
							
				</view>
				
				<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
			</view>
			<view class="nodata" v-if="nodata">
						<i class='iconfont'>&#xe6ef;</i>
						<text>暂无数据</text>
			</view>
			<view class="nodata" v-if="projectLoading">
						<i class='iconfont'>&#xe6ef;</i>
						<text>项目加载中</text>
			</view>
			
		</view>
					
	</view>
</template>

<script>
var util = require('../../common/util.js');
export default {
    data() {
        return {
            list: [], //电影项目列表
            notices: [],
            news: [],
            deposit: 0,
            // percent:0,
            autoplay: true,
            circular: true,
            projectLoading: false,
            nodata: false,
            interval: 3000,
            // scale: 0,
            duration: 1000,
            loading: false,
            finished: false,
            loadMoreText: '加载中...',
            showLoadMore: false,
            params: {
                start: 0,
                limit: 15
            }
        };
    },
    onUnload() {
        this.list = [];
        this.loadMoreText = '加载更多';
        this.showLoadMore = false;
    },
    onPullDownRefresh() {
        this.params.start = 0;
        this.getList();
        this.finished = false;
    },
    onReachBottom() {
        console.log('onReachBottom');
        if (!this.finished) {
            this.showLoadMore = true;
            setTimeout(() => {
                this.params.start += this.params.limit;
                this.getList();
            }, 300);
        }
    },
    methods: {
        //目标金额
        format(money) {
            return money / 1000000;
        },
        ///计算两个整数的百分比值
        getScale(num, total) {
            num = parseFloat(num);
            total = parseFloat(total);
            // if (isNaN(num) || isNaN(total)) {
            //   return "-";
            // }
            return total <= 0 ? 0 : Math.round((num / total) * 10000) / 100.0;
        },

        newsDetail(e) {
            uni.navigateTo({
                url: '../news/newsDetail?id=' + e.newsId
            });
        },
        goDetail(e) {
            uni.navigateTo({
                url: './projectDetail2?price=' + e.priceOfUnit / 100 + '&id=' + e.movieId
            });
        },
        noticeList() {
            uni.navigateTo({
                url: './noticeList'
            });
        },
        noticeDetail(item) {
            uni.navigateTo({
                url: './noticeDetail?id=' + item.newsId
            });
            s;
        },
        getList() {
			// console.log(uni.getStorageSync('firstTime'))
			if(!uni.getStorageSync('firstTime')){
				console.log('firstTime')
				this.projectLoading = true;
			}
			this.loading = true;
            util.ajax(
                'home',
                this.params,
                data => {
                    // uni.hideLoading();
                   
                    let json = data.data;
                    if (json.status) {
						this.projectLoading = false;
                        if (json.data) {
							uni.setStorageSync('firstTime',1)
                            if (0 == this.params.start) {
                                this.list = [];
                            }
                            this.notices = [];
                            this.news = [];

                            for (let i = 0; i < json.data.length; i++) {
                                if (json.data[i].valid) {
                                    json.data[i].percent = this.getScale(
                                        json.data[i].saleMoney,
                                        json.data[i].totalMoney
                                    );
                                    json.data[i].scale =
                                        this.getScale(
                                            json.data[i].saleMoney,
                                            json.data[i].totalMoney
                                        ) === 0
                                            ? '0%'
                                            : this.getScale(
                                                  json.data[i].saleMoney,
                                                  json.data[i].totalMoney
                                              ) + '%';
                                    // console.log(json.data);
                                    json.data[i].saleMoney_format = util.fmoney(
                                        json.data[i].saleMoney / 100
                                    );
                                    this.list.push(json.data[i]);
                                }
                            }

                            if (this.list.length === 0) {
                                this.nodata = true; //无数据
                            } else {
                                this.nodata = false;
                            }
														

                            // 加载状态结束
                            this.loading = false;
                            if (json.data.length < this.params.limit) {
                                this.finished = true;
                            }
                            // console.log(this.list);
                        }

                        this.news = json.news;
                        this.notices = json.notices;
                        uni.stopPullDownRefresh();

                        // uni.setStorageSync('inviteUserId',json.data.inviteUserId)
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    uni.showToast({
                        title: JSON.stringify(data),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        }
    },
    onLoad() {
        this.getList();
    }
};
</script>

<style lang="less">
view {
    // display: -webkit-block;
    // display: block;
}
page {
    min-height: 100%;
}

.project {
    flex: 1;
    flex-direction: column;
    height: 100%;
    .swiperWrap {
        width: 100%;
        height: 400upx;
        position: relative;

        .noNews {
            position: relative;
            width: 100%;
            height: 400upx;
            .iconWrap {
                display: flex;
                height: 300upx;
                width: 100%;
                align-items: center;
                justify-content: center;
                i {
                    font-size: 100upx;
                    color: #cccccc;
                }
            }
            .titleWrap {
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                height: 100upx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        swiper {
            width: 100%;
            height: 400upx;
            .swiper_item {
                position: relative;
                width: 100%;
                height: 400upx;
                justify-content: center;
                .iconWrap {
                    display: flex;
                    height: 300upx;
                    width: 100%;
                    align-items: center;
                    justify-content: center;
                    i {
                        font-size: 100upx;
                        color: #cccccc;
                    }
                }
                image {
                    width: 100%;
                    height: 100%;
                }
                .titleWrap {
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    height: 100upx;
                    .title {
                        width: 97%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        color: #f6f6f6;
                        padding-left: 30upx;
                        box-sizing: border-box;
                        font-size: 30upx;
                        z-index: 2;
                        height: 100upx;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;

                        text {
                            width: 97%;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                    image {
                        position: absolute;
                        z-index: 1;
                        width: 100%;
                        height: 100upx;
                        bottom: 0;
                        left: 0;
                    }
                }
            }
        }
    }
    .notice {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80upx;
        background: white;
        .grace-swiper-msg {
            margin-left: 26upx;
            width: 80%;
            // padding: 12upx 26upx;
            display: flex;
            flex-wrap: nowrap;
						align-items:center;
            text {
                width: 70%;
                font-size: 28upx;
                color: #999999;
								display: flex;
								align-items: center;
            }
            .grace-swiper-msg-icon {
                width: 200upx;
                height: 29upx;
                margin-right: 20upx;
                display: flex;
								justify-content: center;
                align-items: center;
                image {
                    width: 100%;
                    height: 100%;
                    flex-shrink: 0;
                }
            }
            swiper {
                width: 100%;
                height: 50upx;
                swiper-item {
                    line-height: 50upx;
                    navigator {
                        font-size: 28upx;
                        color: #666666;
                    }
                }
            }
        }
        .more {
            color: #ff1268;
            margin-right: 26upx;
            font-size: 28upx;
        }
    }
    .list {
        width: 100%;
        margin-top: 20upx;
				display: flex;
        flex: 1;
        view {
            display: flex;
        }
        .nodata {
            margin-top: 40%;
            // background: white;
            width: 100%;
            display: flex;
            align-items: center;
            color: #bbbbbb;
            justify-content: center;
						
            .iconfont {
                font-size: 100upx;
                margin-right: 30upx;
            }
            text {
                color: #999999;
            }
        }
        .listWrap {
            align-items: center;
            width: 100%;
            display: flex;
            flex-direction: column;
            // padding-bottom: 100upx;
            .cardWrap {
                margin-bottom: 20upx;
                background: white;
                width: 100%;
                display: flex;
                flex-direction: column;
                padding: 30upx 26upx;
                box-sizing: border-box;
                .cardWrap-header {
                    width: 100%;
                    display: flex;
                    margin-bottom: 42upx;
                    .movieInfo_imgDiv {
                        width: 25%;
                        height: 250upx;
                        border-radius: 10upx;
                        align-items: center;
                        justify-content: center;
                        background: #fafafa;
                        i {
                            color: #cccccc;
                            font-size: 60upx;
                        }
                        image {
                            width: 100%;
                            height: 100%;
                            border-radius: 10upx;
                        }
                    }
                    .movieInfo_content {
                        height: 250upx;
                        width: 68%;
                        margin-left: 30upx;
                        display: flex;
                        flex-direction: column;
                        .movieInfo_content_title {
                            font-size: 32upx;
                            color: #222222;
                        }
                        .movieInfo_content_introduce {
                            font-size: 28upx;
                            color: #999999;
                            margin: 24upx 0 22upx;
                        }
                        .movieInfo_content_sort {
                            font-size: 24upx;
                            .tag {
                                color: white;
                                border-radius: 20upx;
                                padding: 8upx 16upx ;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                            .movieInfo_content_type {
                                background: #ff9800;
                                margin-right: 20upx;
                            }
                            .movieInfo_content_status {
                                background: #ff1268;
                            }
                        }
                        .movieInfo_content_money {
                            margin-top: 20upx;
                            display: flex;
                            // align-items: center;
                            font-size: 25upx;
                            color: #ff1268;
                            align-items: baseline;
                            view {
                                display: flex;
                                align-items: baseline;
                                .price {
                                    font-size: 50upx;
                                    align-items: flex-end;
                                }
                            }

                            .tip {
                                color: #bbbbbb;
                                margin-left: 20upx;
                            }
                        }
                    }
                }
                .footer {
                    // display: none;
                    flex-direction: column;
                    align-items: center;
                    .cardWrap-content {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        .data {
                            width: 100%;
                            font-size: 25upx;
                            justify-content: space-between;
                            .dataItem {
                                text:first-child {
                                    margin-bottom: 10upx;
                                }
                                text:last-child {
                                    color: #333333;
                                }
                            }
                            .bought {
                                color: red;
                                width: 50%;
                                display: flex;
                                flex-direction: column;
                                text:first-child {
                                    margin-bottom: 10upx;
                                    font-size: 28upx;
                                    color: #ff0000;
                                }
                                .saleMoney {
                                    font-size: 40upx;
                                    color: #fc594e;
                                }
                            }
                            .right {
                                width: 42%;
                                justify-content: space-between;
                                .reach {
                                    color: #999999;
                                    display: flex;
                                    flex-direction: column;
                                    text {
                                        text-align: center;
                                    }
                                }
                            }
                        }
                        .progress-box {
                            display: flex;
														margin: 34upx 0 30upx;
                            progress {
                                width: 100%;
                                border-radius: 20%;
                            }
                        }
                    }
                    .cardWrap-footer {
                        width: 100%;
                        color: #999999;
                        font-size: 25upx;
                        justify-content: flex-end;
                    }
                }
                .condition {
                    height: 160upx;
                    justify-content: center;
                    align-items: center;
                    i {
                        font-size: 20upx;
                        color: #ff1268;
                    }
                    .line {
                        height: 3upx;
                        background: #ff1268;
                        width: 90upx;
                    }
                    .textWrap {
                        margin: 0 20upx;
                        text {
                            font-size: 30upx;
                            color: #ff1268;
                        }
                        text:first-child {
                            margin-right: 35upx;
                        }
                    }

                    .left_icon {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        width: 100upx;
                        height: 28upx;
                        i {
                            position: absolute;
                            right: -2upx;
                            top: 5upx;
                        }
                        .line {
                            width: 94upx;
                        }
                    }
                    .right_icon {
                        width: 100upx;
                        height: 28upx;
                        display: flex;
                        align-items: center;
                        position: relative;
                        .line {
                            position: absolute;
                            left: 14upx;
                            top: 12upx;
                        }
                    }
                }
                .orange {
                    .line {
                        background-color: #ff9800;
                    }
                    i,
                    .textWrap text {
                        color: #ff9800;
                    }
                }
                .gray {
                    .line {
                        background-color: #bbbaba;
                    }
                    i,
                    .textWrap text {
                        color: #bbbaba;
                    }
                }
            }
        }
    }
}
</style>
